<template>
  <div style="background: #ffffff;border-radius: 4px">
    <a-row style="padding: 20px;box-sizing: border-box">
      <a-col :span="24" style="margin-bottom: 70px">
        <a-button :class="[select==2?'active':'']" style="margin-right: 10px" @click="monthBtn">
          月
        </a-button>
        <a-button :class="[select==1?'active':'']" style="margin-right: 10px"
                  @click="dateBtn">
          日
        </a-button>
        <a-date-picker v-if="date" v-model="dates" @change="datesBtns"
                       style="width: 200px;margin-right: 20px;"/>
        <a-month-picker v-if="month" v-model="months" @change="monthsBtns"
                        style="width: 200px;margin-right: 20px;" placeholder="请选择月份"/>
        <!--        <a-date-picker-->
        <!--          mode="year"-->
        <!--          v-show="year"-->
        <!--          v-model="yearQuarter"-->
        <!--          placeholder="请选择年份"-->
        <!--          format='YYYY'-->
        <!--          style="width: 200px;margin-right: 20px;"-->
        <!--          :open='yearShowOne'-->
        <!--          @openChange="openChangeOne"-->
        <!--          @panelChange="panelChangeOne"/>-->
        <a-button type="primary" @click="search" style="background: #3C67F1;border: none;width: 114px;height: 32px">查询
        </a-button>
      </a-col>
      <a-col :span="18">
        <div style="width: 100%; height: 270px" id="analysis"></div>
      </a-col>
      <a-col :span="6">
        <div class="moisture">
          <div id="moisturePrice" style="width: 100%;height: 100%"></div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import STable from '@/components/table/'
import {soilMoistureChart, querySoilMoisture} from "@api/device";

export default {
  components: {
    STable
  },
  data() {
    return {
      select: 1,
      datad: 1,
      yearShowOne: false,
      yearQuarter: '',
      dates: '',
      months: '',
      date: true,
      month: false,
      year: false,
      dateCOl: true,
      dateCOls: false,
      spin: false,
    }
  },
  mounted() {
    this.chartList()
  },
  methods: {
    datesBtns(value, date) {
      this.months = ''
      this.dates = date
      console.log(value, date)
    },
    monthsBtns(value, date) {
      this.dates = ''
      this.months = date
      this.dateCOls = true
    },
    // 选择月
    monthBtn() {
      this.select = 2
      this.date = false
      this.month = true
      this.year = false
    },
    // 选择日
    dateBtn() {
      this.select = 1
      this.date = true
      this.month = false
      this.year = false
    },
    // 弹出日历和关闭日历的回调
    openChangeOne(status) {
      if (status) {
        this.yearShowOne = true
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      this.yearQuarter = value;
      this.yearShowOne = false;
    },
    search() {
      this.chartList(this.months, this.dates)
    },
    // 折线图
    analysis(data, listY, listY2) {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      let color = ['#3B7FFF', '#5ED6C8']
      let xAxisData = data
      let yAxisData1 = listY
      let yAxisData2 = listY2
      // const hexToRgba = (hex, opacity) => {
      //   let rgbaColor = ''
      //   let reg = /^#[\da-f]{6}$/i
      //   if (reg.test(hex)) {
      //     rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
      //       '0x' + hex.slice(5, 7)
      //     )},${opacity})`
      //   }
      //   return rgbaColor
      // }
      myChart.setOption({
        grid: {
          left: '3%',
          bottom: '8%',
          top: '20%',
          right: '3%'
        },
        color: color,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5391FF'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '水分(%)',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: 'solid',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '一区墒情',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            symbol: 'circle', //数据交叉点样式
            data: yAxisData1,
            lineStyle: {
              shadowColor: 'rgba(158,135,255, 0.5)',
              shadowBlur: 10,
              shadowOffsetY: 5
            }
          },
          {
            name: '二区墒情',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            symbol: 'circle', //数据交叉点样式 (实心点)
            data: yAxisData2,
            // lineStyle: {
            //   shadowColor: 'rgba(158,135,255, 0.5)',
            //   shadowBlur: 10,
            //   shadowOffsetY: 5
            // },
          }
        ]
      })
    },
    chartList(yue, rq) {
      soilMoistureChart(yue == undefined ? '' : yue, rq == undefined ? '' : rq).then(res => {
        console.log(res)
        let data = res.result.listX.map(item => item.value)
        let listY = res.result.listY.map(item => item.name)
        let listY2 = res.result.listY2.map(item => item.name)
        // 折线图
        this.analysis(data, listY, listY2,)
      }).catch(err => {

      })
      querySoilMoisture().then(res => {
        console.log(res)
        let avgOne = res.result.avgOne
        let avgTwo = res.result.avgTwo
        this.moisture(avgOne, avgTwo)
      }).catch(err => {

      })
    },
    moisture(avgOne, avgTwo) {

      var echarts = require('echarts')
      var roseCharts = document.getElementById('moisturePrice') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      var data = [
        {
          name: '一区墒情日平均值',
          value: avgOne
        }, {
          name: '二区墒情日平均值',
          value: avgTwo
        }]

      var titleArr = [], seriesArr = [];
      var colors = [['#296FF5', '#D5E3FD'], ['#ff8c37', '#ffdcc3']]
      data.forEach(function (item, index) {
        titleArr.push(
          {
            text: item.name,
            left: index * 50 + 20 + '%',
            top: '80%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '15',
              color: '#687192',
              textAlign: 'center',
            },
          }
        );
        seriesArr.push(
          {
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [40, 58],
            itemStyle: {
              normal: {
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
              }
            },
            hoverAnimation: false,
            center: [index * 50 + 20 + '%', '50%'],
            data: [{
              value: item.value,
              label: {
                normal: {
                  formatter: function (params) {
                    return params.value + '%';
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    color: colors[index][0]
                  }
                }
              },
            }, {
              value: 100 - item.value,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[index][1]
                },
                emphasis: {
                  color: colors[index][1]
                }
              }
            }]
          }
        )
      });
      myChart.setOption({
        backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr
      })
    }
  }
}
</script>

<style scoped>
.ant-radio-button-wrapper:not(:first-child)::before {
  display: none;
}

.line {
  width: 100%;
  height: 1px;
  background: #FFFFFF;
  border-bottom: 1px solid #DFE1E2;
}

/deep/ .ant-tabs-bar {
  border-bottom: none;
}

.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  width: 80px;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #417CF2;
  border-radius: 15px;
}

/deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: #417CF2;
  color: #fff !important;
  border: 1px solid #417CF2;
  border-radius: 15px;
  /*margin: 0 15px 0 0 ;*/
}

/deep/ .ant-tabs-nav .ant-tabs-tab {
  width: 100px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: #fff;
  color: #1D79FA !important;
  border: 1px solid #417CF2 !important;
  border-radius: 15px !important;
  margin: 0 5px !important;
}

/deep/ .ant-tabs-nav {
  padding-left: 150px !important;
}

/deep/ .ant-btn:hover, .ant-btn:focus {
  background: #8590A6;
  color: #fff;
  border-color: #8590A6;
  border-radius: 3px;
}

.moisture {
  width: 100%;
  height: 262px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.2);
  border-radius: 4px;
}

.active {
  background: #8590A6;
  border-color: #8590A6;
  color: #fff;
}
</style>